<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>项目管理页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/index/css/font.css">
    <link rel="stylesheet" href="/index/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/index/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-table-tool{
            background-color: rgb(199 189 189 / 23%);
        }
    </style>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md8" style="padding-top: 12px;">
        </div>
        <div class="layui-col-md4">
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;float:right"
               href="javascript:location.replace(location.href);" title="刷新">
                <i class="layui-icon layui-icon-refresh
" style="line-height:30px"></i></a>
        </div>
    </div>
</div>
<div class="" style="padding-bottom: 0px;">
    <div class="layui-row demoTable">
        <form class="layui-form layui-col-md12 x-so">
            <input class="layui-input" placeholder="开始日" name="start" id="start" autocomplete="off">
            <input class="layui-input" placeholder="截止日" name="end" id="end" autocomplete="off">
            <input type="text" name="projectName" placeholder="请输入项目名称" id="projectName" autocomplete="off"
                   class="layui-input">
            <button class="layui-btn" type="button" data-type="reload"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="projectBatchDel"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" lay-event="projectAddData"><i class="layui-icon"></i>添加</button>
<!--        <button class="layui-btn layui-btn-sm" lay-event="projectAddData">添加</button>-->
<!--        <button class="layui-btn layui-btn-sm" lay-event="projectBatchDel">批量删除</button>-->
<!--        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
<!--        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    // 返回顶部
    layui.use(['util', 'laydate', 'layer'], function () {
        var util = layui.util
            , layer = layui.layer;
        //固定块
        util.fixbar({
            css: {right: 50, bottom: 100}
            , bgcolor: '#393D49'
            , click: function (type) {
                console.log(type);
                if (type === 'top') {
                    layer.msg('返回顶部')
                }
            }
        });
    });
    // 设置最大可选的日期
    function maxDate(){
        var now = new Date();
        return now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate();
    }
    //日期渲染
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
            // ,type: 'datetime'
            ,max:maxDate()
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
            ,max: maxDate()
        });
    });
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: 'getListData'
            , method: 'GET'
            , title: '项目管理表'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , limit: 15
            , limits: [15, 30, 45, 60, 75, 90]
            , loading: true //是否开始加载条
            , even: true //开启隔行背景#
            , id: 'testReload'
            , cols:
                [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'id', title: 'ID', fixed: 'left', unresize: true, sort: true}
                        , {field: 'projectName', title: '项目名'}
                        , {
                        field: 'projectInfo', title: '项目概述',
                        templet: function (res) {
                            return '<em>' + res.projectInfo + '</em>'
                            }
                        }
                        , {field: 'createTime', title: '创建时间', sort: true}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                    ]
                ]
            , page: true
        });
        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id); //这里面有当前行数据
            switch (obj.event) {
                case 'projectAddData':
                    x_admin_show('添加','/project/addView',600,400,null)
                    break;
                case "projectBatchDel":
                    var idList= []
                    var data = checkStatus.data;
                    for (index in data){
                        idList.push(data[Number(index)].id)
                    }
                    debugger
                    //发异步
                    $.ajax({
                        type: "POST",
                        url: "/project/batch/delete",
                        contentType: "application/json;charset=utf-8",
                        data:JSON.stringify(idList),//JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
                        success: function (data) {
                            if (data.code=200){
                                layer.msg("删除成功")
                            }else{
                                layer.msg("服务器正在快马加鞭为你处理中")
                            }
                        },
                        error: function (data) {
                        }
                    });
                    break
                // case 'getCheckLength':
                //     var data = checkStatus.data;
                //     layer.msg('选中了：' + data.length + ' 个');
                //     break;
                // case 'isAll':
                //     layer.msg(checkStatus.isAll ? '全选' : '未全选');
                //     break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }

        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //发异步
                    $.ajax({
                        type: "POST",
                        url: "/project/delete",
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify({"projectId":data.id}),
                        dataType: "json",
                        success: function (data) {
                            if (data.code=200){
                                obj.del();
                                layer.close(index);
                            }else{
                                layer.msg("服务器正在快马加鞭为你处理中")
                            }
                        },
                        error: function (data) {
                        }
                    });
                });
            }
            else if (obj.event === 'edit') {
                x_admin_show('编辑','/project/editView',600,400,obj.data.id)
                // layer.prompt({
                //     formType: 2
                //     , value: data.projectInfo
                // }, function (value, index) {
                //     obj.update({
                //         projectInfo: value
                //     });
                //     layer.close(index);
                // });
            }
        })
        // 数据搜索重新加载
        // 搜索
        var $ = layui.$, active = {
            reload: function () {
                let projectName = $('#projectName');
                let start = $('#start');
                let end = $('#end');
                if (projectName.val() == '' && (start.val() == '' || end.val() == '')) {
                    layer.msg("请选择时间或者输入项目名")
                } else {
                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            projectName: projectName.val(),
                            start: start.val(),
                            end: end.val()
                        }
                    }, 'data');
                }

            }
        };
        //绑定搜索按钮
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    })
</script>
</body>

</html>